<template>
  <view style="padding: 0 50rpx;">
    <!-- 占位栏，模拟出标题状态栏高度 -->
    <uni-nav-bar backgroundColor="#fafafa" :fixed="true" :statusBar="true" :border="false"></uni-nav-bar>

    <view class="top-box">
      <!-- 左上角叉叉图标 -->
      <image class="back-icon" src="/static/loginView/back.png" @click="backPage"></image>
      <!-- 标题 -->
      <view class="title">完善其它信息</view>
    </view>

    <uni-forms ref="form">
      <uni-forms-item label="出生日期" name="date" :labelWidth="80" class="display-default">
        <uni-datetime-picker type="date" v-model="user.birthday"></uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item label="重置密码问题" name="question" :labelWidth="80" class="display-default">
        <uni-easyinput v-model="user.question" :trim="true" confirmType="next" type="text" :maxlength="255"
          placeholder="忘记密码时使用此问题" />
      </uni-forms-item>
      <uni-forms-item label="重置密码问题答案" name="answer" :labelWidth="80" class="display-default">
        <uni-easyinput v-model="user.answer" :trim="true" confirmType="done" type="text" :maxlength="255"
          placeholder="忘记密码时验证此答案" />
      </uni-forms-item>
    </uni-forms>

    <view class="submit-box display-default" style="justify-content: space-around;">
      <button class="submit" @click="register">注册</button>
      <text class="跳过" style="color: #7d7d7d;font-size: 17px;" @click="skipAndregister">跳过</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        user: {}, // 基本信息+额外信息
        userBasic: {} // 基本信息
      };
    },
    onLoad(e) {
      this.user = JSON.parse(e.user) // 基本信息+额外信息
      this.userBasic = JSON.parse(e.user) // 基本信息

      console.log("this.user: " + JSON.stringify(this.user));
    },
    methods: {
      // 返回上一个页面
      backPage() {
        uni.navigateBack()
      },
      // 注册
      async register() {
        uni.showLoading({
          title: '正在注册中...',
          mask: false
        });

        await this.$http.user.register(this.user).then(res => {
          console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            });
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            });
            // 延迟 500 毫秒跳转
            setTimeout(() => {
              uni.navigateBack({
                delta: 3
              })
            }, 500)
          }
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
          uni.showToast({
            title: '服务器开小差了',
            icon: 'none',
            position: 'center'
          });
        })

        uni.hideLoading()
      },
      // 跳过并注册
      skipAndregister() {
        this.$http.user.register(this.userBasic).then(res => {
          console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            });
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            });
            // 延迟 500 毫秒跳转
            setTimeout(() => {
              uni.navigateBack({
                delta: 3
              })
            }, 500)
          }

        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
          uni.showToast({
            title: '服务器开小差了',
            icon: 'none',
            position: 'center'
          });
        })
      }
    }

  }
</script>

<style lang="scss">
  // 顶部容器
  .top-box {
    display: flex;
    align-items: center;
    margin-bottom: 70rpx;

    // 左上角叉叉图标
    & .back-icon {
      width: 80rpx;
      height: 80rpx;
    }

    // 标题
    & .title {
      font-size: 30px;
      margin-left: 60rpx;
    }
  }

  // 提交注册信息容器
  .submit-box {
    margin-top: 100rpx;

    // 提交注册信息按钮
    & .submit {
      margin: 0px;
      color: #fff;
      width: 70%;
      background: #000;
    }
  }
</style>
